<template>
	<view class="iflex column upload-image">
		<view class="iflex wrap">
			<view v-for="(item,index) of list" :key="item" class="iflex aic jcc item">
				<view class="iflex aic jcc item__delete" @click.stop="tapDelete(index)">
					<view class="iflex aic jcc"></view>
				</view>
				<image class="item__image" :src="item"></image>
			</view>

			<view v-if="showUpload" class="iflex column aic jcc upload-image__box" @click.stop="tapChooseImage">
				<view class="iflex icon-plus"></view>
				<view class="iflex aic jcc fill">上传图片</view>
			</view>
		</view>
		<view class="iflex fill hit-content">支持JPEG、JPG、PNG，不大于10M</view>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			// styleIsolation: 'shared'
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import { defineEmits, defineProps, withDefaults, computed, toRaw } from 'vue';
	import { isEmpty } from '@/utils/util';
	import { uploadFile } from '@/apis/common';
	const emit = defineEmits<{ 'update:modelValue' : [string | string[]] }>();
	const props = withDefaults(defineProps<{
		limit ?: number;
		modelValue : string | string[]
	}>(), {
		limit: 0
	});
	const list = computed(() => {
		return Array.isArray(props.modelValue) ? props.modelValue : isEmpty(props.modelValue) ? [] : [props.modelValue]
	});
	const showUpload = computed(() => {
		return props.limit <= 0 || list.value.length < props.limit;
	})

	function update(value : string | string[]) {
		emit('update:modelValue', value);
	}

	function tapDelete(index : number) {
		if (Array.isArray(props.modelValue)) {
			const valueList = [...toRaw(props.modelValue)];
			valueList.splice(index, 1)
			update(valueList);
			return;
		}
		update('');
	}

	function tapChooseImage() {
		uni.chooseImage({
			count: 1,
			success: (result) => {
				const tempFilePath = result.tempFilePaths[0];
				uploadFile(tempFilePath).then((result : any) => {
					update(Array.isArray(props.modelValue) ? [...toRaw(props.modelValue), result.data.url] : result.data.url);
				});
			}
		});
	}
</script>

<style lang="scss">
	.upload-image {

		.item {
			margin-top: 20rpx;
			margin-right: 20rpx;
			width: 180rpx;
			height: 180rpx;
			border-radius: 12rpx;

			&__image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 12rpx;
			}

			&__delete {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				padding: 7rpx;

				view {
					width: 32rpx;
					height: 32rpx;
					border-radius: 40rpx;
					background: #D74B4B;

					&:before,
					&:after {

						content: '';
						width: 20rpx;
						height: 4rpx;
						border-radius: 2rpx;
						background-color: white;
						transform: rotate(-45deg);
					}

					&:after {
						position: absolute;
						transform: rotate(45deg);
					}
				}
			}
		}

		&__box {
			margin-top: 20rpx;
			width: 180rpx;
			height: 180rpx;
			border-radius: 12rpx;
			background: #FFF;
			color: #909090;
			font-size: 24rpx;
			font-weight: 400;

			.icon-plus {
				width: 32rpx;
				height: 32rpx;

				&:before,
				&:after {
					content: '';
					width: 32rpx;
					height: 4rpx;
					border-radius: 2rpx;
					background-color: #FF710A;
				}

				&:after {
					position: absolute;
					transform: rotate(90deg);
				}
			}
		}
	}

	.hit-content {
		margin-top: 14rpx;
		color: #909090;
		font-size: 24rpx;
		font-weight: 400;
	}
</style>